<template>
	<m-card :icon="icon" :title="title">	<!-- 卡片组件 --><!-- 3.传值(icon，title，要绑定,前面加冒号:)（到Card组件） -->
		<!-- 4.插入到Card组件插槽中的内容 -->
		<div class="nav jc-between">
			<!-- 6.遍历categories数组+实现高亮追踪-->
			<!--	v-bind:class="{active: active == i}",v-on;click="active = i" 可以研究 -->
			<div 
				class="nav-item jc-between"
				v-for="(category, i) in categories"
				v-bind:key="i"
				v-bind:class="{active: active === i}"
				v-on:click="$refs.list.swiper.slideTo(i)"
			>			<!-- 高亮追踪 -->
				<div class="nav-link">{{category.name}}</div>
			</div>
		</div>
		<div class="pt-3">
			<swiper ref="list" v-on:slide-change="() => active = $refs.list.swiper.realIndex"  :options="{autoHeight: true}">					<!-- 高亮追踪 --> <!-- 高度随内容变化 -->
				<!-- 遍历categories -->
				<swiper-slide v-for="(category, i) in categories" v-bind:key="i">
					<!-- 7.添加具名插槽（slot元素中有name属性,为item）+传递数据（：category = category） -->
					<slot name="items" :category="category"></slot>
				</swiper-slide>
			</swiper>
		</div>
	</m-card>
</template>

<script>
export default {
	props: {
		// 2.接收来自Home.vue的值
		icon : { type : String, required : true },
		title : { type : String, required : true },	
		categories: { type : Array, required : true },		
	},
	
	data() {
		return {
			// 5.实现高亮追踪，定义active（详情看style.scss搜索active  131行-140行）,定义为数字0，思路：active = 0（默认），所以第一个高亮，但是数组遍历可以得到索引i，根据索引i（从0开始），实现索引高亮，
			// 点击字符（或滑动屏幕），将屏幕对应内容category的索引i赋值给active（一个变量），再用动态class绑定，变量（active） 等于 索引，（即active : true, 使用active选择器，实现高亮追踪）
			active:0
		}
	}
}
</script>>